<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/vue-router-3.0.1.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			h1,html,body{
				margin: 0;
				padding: 0;
				font-size: 16px;
				text-align: center;
				
			}
			.header{
				background-color: orange;
				height: 80px;
				
			}
			.container{
				display: flex;
				height: 600px;
				
			}
			.left{
				background-color: lightgreen;
				flex: 2;
				
			}
			.main{
				background-color: lightpink;
				flex: 8;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<router-view></router-view>
			<div class="container">
				<router-view name="left"></router-view>
				<router-view name="main"></router-view>
			</div>
			
		</div>
		<script type="text/javascript">
			
			var header = {
				template:'<h1 class="header">header头部区域</h1>'
			}
			var leftBox = {
				template:'<h1 class="left">侧边栏区域</h1>'
			}
			var mainBox = {
				template:'<h1 class="main">主体区域</h1>'
			}
			//创建路有对象
			var router = new VueRouter({
				routes:[
					/* {path:'/',component:header},
					{path:'/left',component:leftBox},
					{path:'/main',component:mainBox} */
					/* 一个路径下多个组件 */
					{path:'/',components:{
						'default':header,
						'left':leftBox,
						'main':mainBox
					}},
				]
			})
			
			
			var vm =new Vue({
				el:'#app',
				data:{},
				methods:{},
				router:router
			})
		</script>
	</body>
</html>
